import {
    Text, 
    View, 
    Button, 
  } from 'react-native';
  import React, { useState, useEffect,useCallback } from 'react';
  import { useFocusEffect } from '@react-navigation/native';

  const Home = ({ navigation }) => {
    // 以下useEffect只会最开始执行一次，不会多次执行
    // useFocusEffect每次状态变化都会执行,只要这个页面变化了就会触发
    // 当前状态变化时，缓存一个函数，使得永远是一个函数
    // useFocusEffect(useCallback)只有在页面跳转的时候才会触发，在页面进行更新变化数据的时候不会触发
    useFocusEffect(useCallback(()=>{
      console.log('focus123');
    },[]))
    useEffect(() => {
      console.log(123)
    }, [])
    const [num, setNum] = useState(0);
    return <View>
      <Text>首页</Text>
      <Text style={{ fontSize: 50 }}>{num}</Text>
      <Button
        title='点击+1'
        onPress={() => {
          // 状态会保持，点击跳转到别处去但是返回来也是原来的
          setNum(num + 1);
        }}
      />
      <Button
        title='详情页'
        onPress={() => {
          // Detail是下面Stack.Screen中的name名字
          navigation.navigate('Detail', { id: num });
        }}
      />
    </View>
  }

  export default Home;